<template>
  <div class="container">
    <el-card class="filter">
      <filter-group :filters="FILTERS" :btns="BTNS" @onBtnClick="onBtnClickGroup" />
      <el-alert :title="`数据一共${total}条`" type="info" show-icon :closable="false"> </el-alert>
    </el-card>
    <custom-table
      :columns="TABLE_CLOUMNS"
      :table-props="{ data: list, border: true }"
      :pagination-props="{
        total: total,
        pageSize: params.size,
        currentPage: params.page,
        background: true
      }"
      @onEvent="onEvent"
      :column-child-prop-mapper="callback"
    />
    <!-- 新增学科弹框 -->
    <el-dialog title="新增目录" :visible.sync="dialogVisible" width="30%" @close='onClose'>
      <el-form ref="fromAdd" :model="from" :rules="fromRules" label-width="80px">
        <el-form-item label="所属学科"  width="100%">
          <el-select v-model="from.subjectID" style="width:100%">
            <el-option :label="item.label" :value="item.value" v-for="(item,index) in simpleList" :key="index" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName" >
          <el-input v-model="from.tagName" placeholder="请输入目录名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubjectapp">确 定</el-button>
      </span>
    </el-dialog>
     <!-- 编辑学科弹框 -->
    <el-dialog title="编辑目录" :visible.sync="editDialogVisible" width="30%">
      <el-form ref="from" :model="fromEdit" :rules="fromRules" label-width="80px"  >
        <el-form-item label="所属学科">
            <el-select v-model="from.subjectID" style="width:100%">
                <el-option :label="item.label" :value="item.value" v-for="(item,index) in simpleList" :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
            <el-input v-model="from.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubjectapp">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableMixin from '@/mixins/table.js'
import FilterGroup from '@/mixins/filter-group.js'
import { TABLE_CLOUMNS, BTNS, FILTERS } from '../constants/tags.js'
import { mapState, mapActions } from 'vuex'
export default {
  mixins: [
    TableMixin,
    FilterGroup
  ],
  mounted () {
    // 删除返回学科按钮
    this.BTNS.splice(3, 1)
    // 判断是否携带id 如果携带,就增加返回学科按钮
    // to fix: id为0时进不来
    if (this.$route.query.id) {
      this.params.subjectID = (this.$route.query.id)
      this.BTNS.push({
        name: '返回学科',
        key: 'jumpSubject',
        props: {
          type: 'text',
          icon: 'el-icon-back',
          class: 'right'
        }
      })
      // 获取简易数据
      this.updateSimplelist(this.params)
    }
    // 获取简易数据
    this.updateSimplelist(this.params)
    // 清空搜索框
    this.onEmpty()
  },
  data () {
    return {
      params: {
        page: 1,
        pagesize: 10
      },
      TABLE_CLOUMNS,
      BTNS,
      FILTERS,
      // 控制新增学科弹出框
      dialogVisible: false,
      // 弹出框表单数据
      from: {
        tagName: '',
        subjectId: ''
      },
      // 弹出框表单规则
      fromRules: {
        tagName: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }, {
          min: 1, max: 4, message: '目录名称为1-4位'
        }]
      },
      // 控制编辑学科弹出框
      editDialogVisible: false,
      // 编辑弹出框表单数据
      fromEdit: {
        id: '',
        subjectName: '',
        subjectID: ''
      }
    }
  },
  computed: {
    ...mapState('Tags', [
      'list',
      'total',
      'simpleList'
    ])
  },
  methods: {
    ...mapActions('Tags', [
      'updatelist',
      'updateadd',
      'updatedel',
      'updateaedit',
      'updateSimplelist',
      'updateEditDirectorys'
    ]),
    // 筛选器所有的按钮点击事件
    onBtnClickGroup (btnkey, params) {
      console.log(btnkey)
      switch (btnkey) {
        case 'search':
          this.onSearch(params)
          break
        case 'delete':
          this.onEmpty()
          break
        case 'addSubject':
          this.onAddSubject()
          break
        case 'jumpSubject':
          this.onJumpSubject()
          break
        default:
          console.error('不受支持的事件类型')
      }
    },
    // 返回学科
    onJumpSubject () {
      this.$router.push('/subjects/list')
    },
    // 新增学科
    onAddSubject () {
      // 显示弹出层
      this.dialogVisible = true
    },
    // 点击新增确定按钮
    async addSubjectapp () {
      console.log(this.from.subjectID)
      console.log(this.from.tagName)
      await this.updateadd({
        id: null,
        subjectID: this.from.subjectID,
        tagName: this.from.tagName
      })
      // 请求成功重新渲染页面
      this.updatelist(this.params)
      // 关闭弹出框
      this.dialogVisible = false
    },
    // 关闭对话框
    onClose () {
      this.$refs.fromAdd.resetFields()
    },
    // 控制操作按钮是否禁用
    callback (scope, key) {
      const { state } = scope.row
      if (key !== 'forbidden') {
        return {
          type: 'text',
          disabled: state === '已启用'
        }
      } else {
        return {
          type: 'text',
          name: state === '已启用' ? '禁用' : '启用'
        }
      }
    },
    // 表格所有按钮点击事件
    onBtnClick (bntkey, ...args) {
      switch (bntkey) {
        case 'forbidden':
          this.onForbidden(...args)
          break
        case 'correct':
          this.onCorrect(...args)
          break
        case 'delete':
          this.onDelete(...args)
          break
        default:
          break
      }
    },
    async onForbidden (data) {
      await this.updateEditDirectorys({
        id: data.id,
        state: data.state === '已启用' ? 0 : 1
      })
      // 请求成功重新渲染页面
      this.updatelist(this.params)
    },
    onCorrect (data) {
      // 把学科的数据给编辑弹出框
      this.fromEdit.id = data.id
      this.fromEdit.subjectName = data.subjectName
      this.fromEdit.subjectID = data.subjectID
      // 显示弹出框
      this.editDialogVisible = true
    },
    // 点击修改确定按钮
    async editSubjectapp () {
      await this.updateaedit({
        id: this.fromEdit.id,
        subjectID: this.fromEdit.subjectID,
        subjectName: this.fromEdit.subjectName
      })
      // 请求成功重新渲染页面
      this.updatelist(this.params)
      // 关闭弹出框
      this.editDialogVisible = false
    },
    // 点击删除按钮
    onDelete (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 请求服务器删除学科
        await this.updatedel(data)
        // 请求成功重新渲染页面
        this.updatelist(this.params)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 点击搜索按钮
    onSearch () {
      if (FILTERS[1].value !== '') {
        this.params.state = FILTERS[1].value
        this.params.tagName = FILTERS[0].value
      } else {
        this.params.tagName = FILTERS[0].value
      }
      this.updatelist(this.params)
    },
    // 清空搜索框
    onEmpty () {
      this.FILTERS[0].value = ''
      this.FILTERS[1].value = ''
    }
  }

}
</script>

<style scoped lang='less'></style>
